<template>
  <div>
    <el-dialog
      :title="title"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="530px"
      @closed="closed"
    >
      <el-input v-model="state.name" :placeholder="placeholder"></el-input>
      <div class="bg-[#e5f1f5] mt-[10px] p-[8px] border flex items-center">
        <div class="w-[95px]">批量修改</div>
        <el-input-number
          class="!w-[80px]"
          size="small"
          :precision="2"
          :step="0.01"
          :max="100"
          :min="0"
          v-model="state.value"
          :controls="false"
          @change="handleMaster"
        />
        <span class="ml-[5px]">%</span>
      </div>
      <section class="mt-[10px]">
        <article class="grid grid-cols-2 bg-[#e5f1f5] border">
          <div class="flex justify-center border-right py-[6px]">
            <span class="flex-1 pl-[10px]">彩票名称</span>
            <span class="flex-1 pr-[10px]">返佣比例</span>
          </div>
          <div class="flex justify-center py-[6px]">
            <span class="flex-1 pl-[10px]">彩票名称</span>
            <span class="flex-1 pr-[10px]">返佣比例</span>
          </div>
        </article>
        <article class="grid grid-cols-2 border-right border-left">
          <div
            class="flex items-center border-bottom"
            :class="{
              'border-right': i % 2 == 0
            }"
            v-for="(item, i) in games"
            :key="i"
          >
            <div class="flex-1 pl-[10px]">
              {{ item.Name }}
            </div>
            <div class="flex-1 py-[5px] pr-[10px] flex items-center">
              <el-input-number
                class="!w-[80px]"
                size="small"
                :precision="2"
                :step="0.01"
                :max="100"
                :min="0"
                v-model="item.BackRate"
                :controls="false"
              />
              <span class="ml-[5px]">%</span>
            </div>
          </div>
        </article>
      </section>
      <template #footer>
        <el-button @click="closed">取 消</el-button>
        <el-button
          :disabled="state.updating"
          :loading="state.updating"
          type="primary"
          @click="confirm"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { message } from "@/utils/message";
import { debounce } from "lodash-es";
import { reqAddAgentUser } from "@/api/user";
import { useGameStore } from "@/store/modules/game";
import { storeToRefs } from "pinia";

const props = withDefaults(
  defineProps<{
    pid: number | null;
  }>(),
  {
    pid: null
  }
);
const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);
const games = ref(
  gameTotal.value.map(item => {
    return {
      ...item,
      BackRate: 0
    };
  })
);
const emit = defineEmits(["update"]);
const state = reactive({
  updating: false,
  isShow: false,
  name: "",
  value: 0
});
const placeholder = computed(() => {
  return "请输入下线用户名";
});
const title = computed(() => {
  return "添加下线";
});
const closed = () => {
  state.isShow = false;
  state.name = "";
  state.value = 0;
};
const open = () => {
  state.isShow = true;
  games.value = gameTotal.value.map(item => {
    return {
      ...item,
      BackRate: 0
    };
  });
};
const handleMaster = (val: number) => {
  games.value.forEach(item => {
    item.BackRate = val;
  });
};

const confirm = debounce(
  async () => {
    if (!props.pid) return;
    if (!state.name) {
      message.error(placeholder.value);
      return;
    }
    try {
      state.updating = true;
      const commissionRate: Record<string, any> = {};
      for (let item in games.value) {
        commissionRate[String(games.value[item].LotteryId)] = games.value[item].BackRate;
      }
      const params = {
        UserName: state.name,
        ParentId: props.pid,
        CommissionRate: JSON.stringify(commissionRate)
      };
      await reqAddAgentUser(params);
      state.name = "";
      emit("update");
      message.success(`添加下线成功`);
      setTimeout(() => {
        closed();
      }, 200);
    } catch (error) {
      console.log(error);
    }
    state.updating = false;
  },
  500,
  { leading: true, trailing: false }
);

defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 10px 20px 10px 20px;
}
</style>
